<!DOCTYPE html>


<html lang="zh-CN">


<head>
  <meta charset="utf-8" />
    
  <meta name="description" content="杰克小麻雀的博客" />
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>
    从零开始免费搭建自己的博客(四)——编写Markdown文章利器 Typora |  半亩方塘
  </title>
  <meta name="generator" content="hexo-theme-ayer">
  
  <link rel="shortcut icon" href="/favicon.ico" />
  
  
<link rel="stylesheet" href="/dist/main.css">

  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Shen-Yu/cdn/css/remixicon.min.css">

  
<link rel="stylesheet" href="/css/custom.css">

  
  
<script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>

  
  

  

</head>

</html>
<body>
  <div id="app">
    
      
      <canvas width="1777" height="841"
        style="position: fixed; left: 0px; top: 0px; z-index: 99999; pointer-events: none;"></canvas>
      
    <main class="content on">
      <section class="outer">
  <article
  id="post-从零开始免费搭建自己的博客(四)——编写Markdown文章利器 Typora"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h1 class="article-title sea-center" style="border-left:0" itemprop="name">
  从零开始免费搭建自己的博客(四)——编写Markdown文章利器 Typora
</h1>
 

    </header>
     
    <div class="article-meta">
      <a href="/2021/01/11/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%85%8D%E8%B4%B9%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2(%E5%9B%9B)%E2%80%94%E2%80%94%E7%BC%96%E5%86%99Markdown%E6%96%87%E7%AB%A0%E5%88%A9%E5%99%A8%20Typora/" class="article-date">
  <time datetime="2021-01-12T06:38:56.000Z" itemprop="datePublished">2021-01-11</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/">博客搭建</a>
  </div>
  
<div class="word_count">
    <span class="post-time">
        <span class="post-meta-item-icon">
            <i class="ri-quill-pen-line"></i>
            <span class="post-meta-item-text"> 字数统计:</span>
            <span class="post-count">4.2k</span>
        </span>
    </span>

    <span class="post-time">
        &nbsp; | &nbsp;
        <span class="post-meta-item-icon">
            <i class="ri-book-open-line"></i>
            <span class="post-meta-item-text"> 阅读时长≈</span>
            <span class="post-count">16 分钟</span>
        </span>
    </span>
</div>
 
    </div>
      
    <div class="tocbot"></div>




  
    <div class="article-entry" itemprop="articleBody">
       
  <blockquote>
<p>​    本文是博客搭建系列文章第四篇，其他文章链接：</p>
<ol>
<li>从零开始免费搭建自己的博客(一)——<a target="_blank" rel="noopener" href="https://yushuaige.github.io/2020/12/31/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%85%8D%E8%B4%B9%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2-%E4%B8%80-%E2%80%94%E2%80%94%E6%9C%AC%E5%9C%B0%E6%90%AD%E5%BB%BAhexo%E6%A1%86%E6%9E%B6/">本地搭建 Hexo 框架</a></li>
<li>从零开始免费搭建自己的博客(二)——<a target="_blank" rel="noopener" href="https://yushuaige.github.io/2021/01/01/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%85%8D%E8%B4%B9%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2-%E4%BA%8C-%E2%80%94%E2%80%94%E5%9F%BA%E4%BA%8E-GitHub-pages-%E5%BB%BA%E7%AB%99/">基于 GitHub pages 建站</a></li>
<li>从零开始免费搭建自己的博客(三)——<a target="_blank" rel="noopener" href="https://yushuaige.github.io/2021/01/02/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%85%8D%E8%B4%B9%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2-%E4%B8%89-%E2%80%94%E2%80%94%E5%9F%BA%E4%BA%8E-Gitee-pages-%E5%BB%BA%E7%AB%99/">基于 Gitee pages 建站</a></li>
<li><strong>从零开始免费搭建自己的博客(四)——<a target="_blank" rel="noopener" href="https://yushuaigee.gitee.io/2021/01/11/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%85%8D%E8%B4%B9%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2(%E5%9B%9B)%E2%80%94%E2%80%94%E7%BC%96%E5%86%99Markdown%E6%96%87%E7%AB%A0%E5%88%A9%E5%99%A8%20Typora/">编写Markdown文章利器 Typora</a></strong></li>
<li>从零开始免费搭建自己的博客(五)——<a target="_blank" rel="noopener" href="https://yushuaigee.gitee.io/2021/01/14/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%85%8D%E8%B4%B9%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2(%E4%BA%94)%E2%80%94%E2%80%94Typora%20+%20PicGo%20+%20GitHub%20Gitee%E5%9B%BE%E5%BA%8A/">Typora + PicGo + GitHub/Gitee图床</a></li>
<li>从零开始免费搭建自己的博客(六)——三个站点一键发布博客</li>
<li>从零开始免费搭建自己的博客(七)——迁移 CSDN 博客到个人博客站点</li>
<li>从零开始免费搭建自己的博客(八)——博客网站个性化设置及优化</li>
</ol>
</blockquote>
<hr>
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>前面我们利用 Hexo 框架搭建了自己的博客网站，可以注意到 Hexo 默认是使用 Markdown 格式的文件的，所以在写新博客之前，我们要先了解一下  Markdown 语法 。</p>
<p>其实我在上大学时也听说过 Markdown，但是一直以为很麻烦，所以之前在 CSDN 的博客都是用富文本编辑器写的，直到在公司试着写了一篇 Markdown 格式的资料，才领略到它的魅力，要不说一个东西这么流行一定有它的道理呢。平时经常看到推荐 Markdown 的文章，都会提到”让你全程双手不离开键盘就可以写出带格式的文章”，我不以为然：我点几下鼠标就能编辑出很美观的格式，也没浪费多少时间啊，何必为了写文章去学一个新的语法呢？</p>
<p>开始用 Markdown 后，我发现选择 Markdown 起码有这些好处：</p>
<ul>
<li>一次编写，到处编辑，不会出现不同版本word显示效果不同的情况。</li>
<li>语法并不麻烦，从零基础到会使用，十分钟足矣。</li>
<li>简洁且漂亮。我也说不上来为啥，可能是因为程序员更懂程序员的审美吧。</li>
<li>有Typora这样的编辑器。这真是一个很大的加分项，如果你用过其他软件写 Markdown 就知道了。</li>
</ul>
<p>本文先介绍 Markdown 语法，再介绍下 Typora 软件的安装和使用。想必使用 Markdown 写文章的人没有不知道 Typora 的，为了系列文章的完整性还是写一篇，主要介绍下我个人觉得比较方便的使用技巧。</p>
<h2 id="一-、使用-Markdown"><a href="#一-、使用-Markdown" class="headerlink" title="一 、使用 Markdown"></a>一 、使用 Markdown</h2><h3 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h3><p>创始人 John Gruber 在2004 创造了Markdown语言。 Markdown是一种轻量级标记语言，这个语言的目的是希望大家使用“易于阅读、易于撰写的纯文字格式，并选择性的转换成有效的HTML。</p>
<p>更通俗的解释：我们之所以不用记事本而用 Microsoft Word 写文章，是因为在 Word 里，我们可以用鼠标设置各种标题、字体加粗等格式以及插入表格、插入图片等功能，使文章更加美观易读。而使用 Markdown 语法，在纯文本编辑器中也可以快速写出格式丰富且又美观的文章，手不用离开键盘。</p>
<p>什么叫标记语言，比如在 html 中，用<code>&lt;h1&gt;标题内容&lt;/h1&gt;</code>的形式来标记文字显示的格式，支持 html 解析的软件(浏览器)，读到<code>&lt;h1&gt;</code>就知道这是一个一级标题，然后就把它的字体渲染大一点。Markdown 也是类似的道理，不过作者让标记方法更简单更易读，例如想标记标题就用<code># 标题内容</code>这种形式，我们写文章时随手就能敲出来。当然，想要看到显示效果也需要在支持 Markdown 解析的软件中打开。</p>
<h3 id="十分钟学会-Markdown-语法"><a href="#十分钟学会-Markdown-语法" class="headerlink" title="十分钟学会 Markdown 语法"></a>十分钟学会 Markdown 语法</h3><p>我之所以没有把”十分钟学会…”放在标题里，是因为我这个方法是真的只需要十分钟，我就是这样做的。</p>
<p>下面代码块里的这段文字是 CSDN 的 Markdown 编辑器的新手示例帮助，基本包含了所有的 Markdown 用法，我们只需要在新建一个<code>Markdown示例.md</code>文件，把下面这段话复制进去保存，再用支持md格式的软件(比如后文介绍的Typora)打开，所有的效果所见即所得。先大概浏览一下有哪些效果，写自己的文章时，想用哪种效果直接在示例里面复制源码粘贴到自己的文件再修改就行了。</p>
<p>用这个方法写上一两篇文章，下次再写的时候就不用再参考示例了。因为我们本质上是用语法写文章，没必要上来先背 Markdown 语法，不会的可以现查。就跟学英语不能单纯的背单词而是要多看文章一个道理。</p>
<p>比如，写文章时想用一个按键的效果，就可以到示例文件中找到并复制过来修改一下：</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/md_demo.gif" alt="md_demo"></p>
<p>示例内容：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br></pre></td><td class="code"><pre><span class="line">@[<span class="string">TOC</span>](<span class="link">这里写自定义目录标题</span>)</span><br><span class="line"></span><br><span class="line"><span class="section"># 欢迎使用Markdown编辑器</span></span><br><span class="line"></span><br><span class="line">你好！ 这是你第一次使用 <span class="strong">**Markdown编辑器**</span> 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。</span><br><span class="line"></span><br><span class="line"><span class="section">## 新的改变</span></span><br><span class="line"></span><br><span class="line">我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：</span><br><span class="line"></span><br><span class="line"><span class="bullet">  1.</span> <span class="strong">**全新的界面设计**</span> ，将会带来全新的写作体验；</span><br><span class="line"><span class="bullet">  2.</span> 在创作中心设置你喜爱的代码高亮样式，Markdown <span class="strong">**将代码片显示选择的高亮样式**</span> 进行展示；</span><br><span class="line"><span class="bullet">  3.</span> 增加了 <span class="strong">**图片拖拽**</span> 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；</span><br><span class="line"><span class="bullet">  4.</span> 全新的 <span class="strong">**KaTeX数学公式**</span> 语法；</span><br><span class="line"><span class="bullet">  5.</span> 增加了支持<span class="strong">**甘特图的mermaid语法[^1]**</span> 功能；</span><br><span class="line"><span class="bullet">  6.</span> 增加了 <span class="strong">**多屏幕编辑**</span> Markdown文章功能；</span><br><span class="line"><span class="bullet">  7.</span> 增加了 <span class="strong">**焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置**</span> 等功能，功能按钮位于编辑区域与预览区域中间；</span><br><span class="line"><span class="bullet">  8.</span> 增加了 <span class="strong">**检查列表**</span> 功能。</span><br><span class="line"></span><br><span class="line">[<span class="string">^1</span>]: [<span class="string">mermaid语法说明</span>](<span class="link">https://mermaidjs.github.io/</span>)</span><br><span class="line"></span><br><span class="line"><span class="section">## 功能快捷键</span></span><br><span class="line"></span><br><span class="line">撤销：<span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>Ctrl/Command<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span> + <span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>Z<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span></span><br><span class="line">重做：<span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>Ctrl/Command<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span> + <span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>Y<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span></span><br><span class="line">加粗：<span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>Ctrl/Command<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span> + <span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>B<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span></span><br><span class="line">斜体：<span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>Ctrl/Command<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span> + <span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>I<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span></span><br><span class="line">标题：<span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>Ctrl/Command<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span> + <span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>Shift<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span> + <span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>H<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span></span><br><span class="line">无序列表：<span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>Ctrl/Command<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span> + <span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>Shift<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span> + <span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>U<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span></span><br><span class="line">有序列表：<span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>Ctrl/Command<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span> + <span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>Shift<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span> + <span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>O<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span></span><br><span class="line">检查列表：<span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>Ctrl/Command<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span> + <span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>Shift<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span> + <span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>C<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span></span><br><span class="line">插入代码：<span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>Ctrl/Command<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span> + <span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>Shift<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span> + <span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>K<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span></span><br><span class="line">插入链接：<span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>Ctrl/Command<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span> + <span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>Shift<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span> + <span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>L<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span></span><br><span class="line">插入图片：<span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>Ctrl/Command<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span> + <span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>Shift<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span> + <span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>G<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span></span><br><span class="line">查找：<span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>Ctrl/Command<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span> + <span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>F<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span></span><br><span class="line">替换：<span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>Ctrl/Command<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span> + <span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>G<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="section">## 合理的创建标题，有助于目录的生成</span></span><br><span class="line"></span><br><span class="line">直接输入1次<span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>#<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span>，并按下<span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>space<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span>后，将生成1级标题。</span><br><span class="line">输入2次<span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>#<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span>，并按下<span class="xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>space<span class="xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span>后，将生成2级标题。</span><br><span class="line">以此类推，我们支持6级标题。有助于使用<span class="code">`TOC`</span>语法后生成一个完美的目录。</span><br><span class="line"></span><br><span class="line"><span class="section">## 如何改变文本的样式</span></span><br><span class="line"></span><br><span class="line"><span class="emphasis">*强调文本*</span> <span class="emphasis">_强调文本_</span></span><br><span class="line"></span><br><span class="line"><span class="strong">**加粗文本**</span> <span class="strong">__加粗文本__</span></span><br><span class="line"></span><br><span class="line">==标记文本==</span><br><span class="line"></span><br><span class="line">~~删除文本~~</span><br><span class="line"></span><br><span class="line"><span class="quote">&gt; 引用文本</span></span><br><span class="line"></span><br><span class="line">H~2~O is是液体。</span><br><span class="line"></span><br><span class="line">2^10^ 运算结果是 1024.</span><br><span class="line"></span><br><span class="line"><span class="section">## 插入链接与图片</span></span><br><span class="line"></span><br><span class="line">链接: [<span class="string">link</span>](<span class="link">https://www.csdn.net/</span>).</span><br><span class="line"></span><br><span class="line">图片: ![<span class="string">Alt</span>](<span class="link">https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw</span>)</span><br><span class="line"></span><br><span class="line">带尺寸的图片: ![<span class="string">Alt</span>](<span class="link">https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw =30x30</span>)</span><br><span class="line"></span><br><span class="line">居中的图片: ![<span class="string">Alt</span>](<span class="link">https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw#pic_center</span>)</span><br><span class="line"></span><br><span class="line">居中并且带尺寸的图片: ![<span class="string">Alt</span>](<span class="link">https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw#pic_center =30x30</span>)</span><br><span class="line"></span><br><span class="line">当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。</span><br><span class="line"></span><br><span class="line"><span class="section">## 如何插入一段漂亮的代码片</span></span><br><span class="line"></span><br><span class="line">去[<span class="string">博客设置</span>](<span class="link">https://mp.csdn.net/console/configBlog</span>)页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 <span class="code">`代码片`</span>.</span><br><span class="line"></span><br><span class="line">​<span class="code">```javascript</span></span><br><span class="line"><span class="code">// An highlighted block</span></span><br><span class="line"><span class="code">var foo = &#x27;bar&#x27;;</span></span><br><span class="line"><span class="code">​```</span></span><br><span class="line"></span><br><span class="line"><span class="section">## 生成一个适合你的列表</span></span><br><span class="line"></span><br><span class="line"><span class="bullet">-</span> 项目</span><br><span class="line"><span class="bullet">  -</span> 项目</span><br><span class="line"><span class="bullet">    -</span> 项目</span><br><span class="line"></span><br><span class="line"><span class="bullet">1.</span> 项目1</span><br><span class="line"><span class="bullet">2.</span> 项目2</span><br><span class="line"><span class="bullet">3.</span> 项目3</span><br><span class="line"></span><br><span class="line"><span class="bullet">-</span> [ ] 计划任务</span><br><span class="line"><span class="bullet">-</span> [x] 完成任务</span><br><span class="line"></span><br><span class="line"><span class="section">## 创建一个表格</span></span><br><span class="line"></span><br><span class="line">一个简单的表格是这么创建的：</span><br><span class="line"></span><br><span class="line">| 项目 | Value |</span><br><span class="line">| ---- | ----- |</span><br><span class="line">| 电脑 | $1600 |</span><br><span class="line">| 手机 | $12   |</span><br><span class="line">| 导管 | $1    |</span><br><span class="line"></span><br><span class="line"><span class="section">### 设定内容居中、居左、居右</span></span><br><span class="line"></span><br><span class="line">使用<span class="code">`:---------:`</span>居中</span><br><span class="line">使用<span class="code">`:----------`</span>居左</span><br><span class="line">使用<span class="code">`----------:`</span>居右</span><br><span class="line"></span><br><span class="line">|     第一列     |         第二列 | 第三列         |</span><br><span class="line">| :------------: | -------------: | :------------- |</span><br><span class="line">| 第一列文本居中 | 第二列文本居右 | 第三列文本居左 |</span><br><span class="line"></span><br><span class="line"><span class="section">### SmartyPants</span></span><br><span class="line"></span><br><span class="line">SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：</span><br><span class="line">|    TYPE   |ASCII                          |HTML</span><br><span class="line">|----------------|-------------------------------|-----------------------------|</span><br><span class="line">|Single backticks|<span class="code">`&#x27;Isn&#x27;t this fun?&#x27;`</span>            |&#x27;Isn&#x27;t this fun?&#x27;            |</span><br><span class="line">|Quotes          |<span class="code">`&quot;Isn&#x27;t this fun?&quot;`</span>            |&quot;Isn&#x27;t this fun?&quot;            |</span><br><span class="line">|Dashes          |<span class="code">`-- is en-dash, --- is em-dash`</span>|-- is en-dash, --- is em-dash|</span><br><span class="line"></span><br><span class="line"><span class="section">## 创建一个自定义列表</span></span><br><span class="line"></span><br><span class="line">Markdown</span><br><span class="line">:  Text-to-HTML conversion tool</span><br><span class="line"></span><br><span class="line">Authors</span><br><span class="line">:  John</span><br><span class="line">:  Luke</span><br><span class="line"></span><br><span class="line"><span class="section">## 如何创建一个注脚</span></span><br><span class="line"></span><br><span class="line">一个具有注脚的文本。[^2]</span><br><span class="line"></span><br><span class="line">[<span class="symbol">^2</span>]: <span class="link">注脚的解释</span></span><br><span class="line"></span><br><span class="line"><span class="section">##  注释也是必不可少的</span></span><br><span class="line"></span><br><span class="line">Markdown将文本转换为 HTML。</span><br><span class="line"></span><br><span class="line"><span class="emphasis">*[HTML]:   超文本标记语言</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">## KaTeX数学公式</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">您可以使用渲染LaTeX数学表达式 [<span class="string">KaTeX</span>](<span class="link">https://khan.github.io/KaTeX/</span>):</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall</span></span><br><span class="line"><span class="emphasis">n\in\mathbb N$ 是通过欧拉积分</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">$$</span></span><br><span class="line"><span class="emphasis">\Gamma(z) = \int_0^\infty t^&#123;z-1&#125;e^&#123;-t&#125;dt\,.</span></span><br><span class="line"><span class="emphasis">$$</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">&gt; 你可以找到更多关于的信息 <span class="strong">**LaTeX**</span> 数学表达式[<span class="string">here</span>][<span class="symbol">1</span>].</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">## 新的甘特图功能，丰富你的文章</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">​```mermaid</span></span><br><span class="line"><span class="emphasis">gantt</span></span><br><span class="line"><span class="emphasis">        dateFormat  YYYY-MM-DD</span></span><br><span class="line"><span class="emphasis">        title Adding GANTT diagram functionality to mermaid</span></span><br><span class="line"><span class="emphasis">        section 现有任务</span></span><br><span class="line"><span class="emphasis">        已完成               :done,    des1, 2014-01-06,2014-01-08</span></span><br><span class="line"><span class="emphasis">        进行中               :active,  des2, 2014-01-09, 3d</span></span><br><span class="line"><span class="emphasis">        计划一               :         des3, after des2, 5d</span></span><br><span class="line"><span class="emphasis">        计划二               :         des4, after des3, 5d</span></span><br><span class="line"><span class="emphasis">​```</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">- 关于 <span class="strong">**甘特图**</span> 语法，参考 [<span class="string">这儿</span>][<span class="symbol">2</span>],</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">## UML 图表</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">可以使用UML图表进行渲染。 [<span class="string">Mermaid</span>](<span class="link">https://mermaidjs.github.io/</span>). 例如下面产生的一个序列图：</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">​```mermaid</span></span><br><span class="line"><span class="emphasis">sequenceDiagram</span></span><br><span class="line"><span class="emphasis">张三 -&gt;&gt; 李四: 你好！李四, 最近怎么样?</span></span><br><span class="line"><span class="emphasis">李四--&gt;&gt;王五: 你最近怎么样，王五？</span></span><br><span class="line"><span class="emphasis">李四--x 张三: 我很好，谢谢!</span></span><br><span class="line"><span class="emphasis">李四-x 王五: 我很好，谢谢!</span></span><br><span class="line"><span class="emphasis">Note right of 王五: 李四想了很长时间, 文字太长了<span class="xml"><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span>不适合放在一行.</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">李四--&gt;&gt;张三: 打量着王五...</span></span><br><span class="line"><span class="emphasis">张三-&gt;&gt;王五: 很好... 王五, 你怎么样?</span></span><br><span class="line"><span class="emphasis">​```</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">这将产生一个流程图。:</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">​```mermaid</span></span><br><span class="line"><span class="emphasis">graph LR</span></span><br><span class="line"><span class="emphasis">A[长方形] -- 链接 --&gt; B((圆))</span></span><br><span class="line"><span class="emphasis">A --&gt; C(圆角长方形)</span></span><br><span class="line"><span class="emphasis">B --&gt; D&#123;菱形&#125;</span></span><br><span class="line"><span class="emphasis">C --&gt; D</span></span><br><span class="line"><span class="emphasis">​```</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">- 关于 <span class="strong">**Mermaid**</span> 语法，参考 [<span class="string">这儿</span>][<span class="symbol">3</span>],</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">## FLowchart流程图</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">我们依旧会支持flowchart的流程图：</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">​```mermaid</span></span><br><span class="line"><span class="emphasis">flowchat</span></span><br><span class="line"><span class="emphasis">st=&gt;start: 开始</span></span><br><span class="line"><span class="emphasis">e=&gt;end: 结束</span></span><br><span class="line"><span class="emphasis">op=&gt;operation: 我的操作</span></span><br><span class="line"><span class="emphasis">cond=&gt;condition: 确认？</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">st-&gt;op-&gt;cond</span></span><br><span class="line"><span class="emphasis">cond(yes)-&gt;e</span></span><br><span class="line"><span class="emphasis">cond(no)-&gt;op</span></span><br><span class="line"><span class="emphasis">​```</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">- 关于 <span class="strong">**Flowchart流程图**</span> 语法，参考 [<span class="string">这儿</span>][<span class="symbol">4</span>].</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">## 导出与导入</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">###  导出</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 <span class="strong">**文章导出**</span> ，生成一个.md文件或者.html文件进行本地保存。</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">### 导入</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，</span></span><br><span class="line"><span class="emphasis">继续你的创作。</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">[1]: http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference</span></span><br><span class="line"><span class="emphasis">[2]: https://mermaidjs.github.io/</span></span><br><span class="line"><span class="emphasis">[3]: https://mermaidjs.github.io/</span></span><br><span class="line"><span class="emphasis">[4]: http://adrai.github.io/flowchart.js/</span></span><br></pre></td></tr></table></figure>
<h2 id="二、使用-Typora"><a href="#二、使用-Typora" class="headerlink" title="二、使用 Typora"></a>二、使用 Typora</h2><h3 id="简介-1"><a href="#简介-1" class="headerlink" title="简介"></a>简介</h3><p>Typora 是一款支持实时预览的 Markdown 文本编辑器，现在支持有 OS X、Windows、Linux 三个平台的版本。其实像 Pycharm 等 IDE 也支持 md 语法，不过大都是左侧显示源码，右侧显示效果，或者只显示源码/效果，包括 CSDN 的在线 Markdown 编辑器也是这样。而Typora 创新的提出实时预览这种方式，源码和显示效果合一显示，所见即所得，非常的方便。</p>
<p>为什么要用 Typora ？就和你为什么用 jetbrains 全家桶写代码一样，因为它们漂亮、简洁、强大。</p>
<p>这些特点在它的官网(<a target="_blank" rel="noopener" href="https://typora.io/">Typora</a>)就能看出来。直接拉到页面最后，下载对应版本安装就可以了。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210109193749369.png" alt="image-20210109193749369"></p>
<p>网上有很多介绍的 Typora 的文章，推荐两篇写的很详细的文章。</p>
<p>深度介绍(必看)：<a target="_blank" rel="noopener" href="https://sspai.com/post/54912">少数派:Typora 完全使用详解</a></p>
<p>快捷键介绍：<a target="_blank" rel="noopener" href="https://www.cnblogs.com/hider/p/11614688.html">Typora入门</a></p>
<p>设置：**</p>
<h3 id="常用设置"><a href="#常用设置" class="headerlink" title="常用设置"></a>常用设置</h3><p>下面介绍几个我觉得很有用很方便的设置。</p>
<p>打开<code>文件</code> –&gt; <code>偏好设置</code>。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210109230837590.png" alt="image-20210109230837590"></p>
<h4 id="1-打开自动保存"><a href="#1-打开自动保存" class="headerlink" title="1. 打开自动保存"></a>1. 打开自动保存</h4><p>选择<code>通用</code>，勾选 <code>自动保存</code>。这样软件会定期自动保存我们的编辑内容，防止异常退出时忘记保存。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210109231108977.png" alt="image-20210109231108977"></p>
<h4 id="2-打开成对符号"><a href="#2-打开成对符号" class="headerlink" title="2. 打开成对符号"></a>2. 打开成对符号</h4><p>选择<code>编辑器</code>，勾选 <code>匹配括号和引号</code>和<code>匹配 Markdown 字符</code>。这样当我们输入括号(<code>[]()&#123;&#125;</code>)等成对的符号时，只需要输入左边一半，软件会自动补充右边一半。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210109231716512.png" alt="image-20210109231716512"></p>
<h4 id="3-打开首行缩进"><a href="#3-打开首行缩进" class="headerlink" title="3. 打开首行缩进"></a>3. 打开首行缩进</h4><p>选择<code>Markdown</code>，勾选 <code>首行缩进</code>。这个看自己需要，只是在 Typora 本地显示中首行缩进，因为 Markdown 语法本身并没有支持首行缩进的符号，所以文件拿到别的地方不会有首行缩进的效果。如果非要首行缩进，可以在段落开头加个<code>&amp;emsp;&amp;emsp;</code>可以在其他地方打开时也能首行缩进。这个仁者见仁，智者见智，开始我是很喜欢首行缩进的，后来发现不缩进也挺好看的，现在已经习惯了。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210109232158103.png" alt="image-20210109232158103"></p>
<h4 id="4-打开自动保存图片"><a href="#4-打开自动保存图片" class="headerlink" title="4. 打开自动保存图片"></a>4. 打开自动保存图片</h4><p>选择<code>图像</code>，选择<code>插入图片时...</code>自动执行的动作：</p>
<ul>
<li>默认是<code>无特殊操作</code>，当你写文章时，粘贴或者拖动进来的图片会自动保存在<code>C:\Users\&lt;电脑用户名&gt;\AppData\Roaming\Typora\typora-user-images</code>目录下。</li>
<li><code>复制图片到当前文件夹</code>，选择该选项时，粘贴或者拖动进来的图片会自动保存在当前编辑的文件同目录下。</li>
<li><code>复制图片到 ./$&#123;filename&#125;.assets 文件夹</code>，选择该选项时，粘贴或者拖动图片进来，会自动在当前编辑的文件目录下新建文件夹<code>$&#123;filename&#125;.assets</code>并将图片复制到该文件夹下，其中``${filename}<code>是当前编辑的文件名，不包含</code>.md`。</li>
<li><code>上传图片</code>，选择该选项时，粘贴或者拖动图片进来，会根据下面的<code>上传服务设置</code>将图片自动上传到图床，平时最好用这个设置，详细内容在下一篇文章中介绍。</li>
<li><code>复制到指定路经</code>，选择该选项时，可以自己填入一个文件夹，粘贴或者拖动图片进来，会自动创建文件夹并将图片复制进去。</li>
</ul>
<p>建议选择<code>上传图片</code>，按照下篇文章的方法将图片保存在图床。当然，如果写的的文章只保存在本地或者需要断网时浏览，那么可以选择其他几个选项。我有一次手贱把图片文件夹删了，辛苦几天截得图片和录的 GIF 全没了，经过这次教训，我感觉还是上传到图床比较保险，可惜不能同时选择保存到本地和上传图床。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210109233120920.png" alt="image-20210109233120920"></p>
<h2 id="后续"><a href="#后续" class="headerlink" title="后续"></a>后续</h2><p>现在我们可以先在本地写好博客，然后按照前两篇文章的方法将它们发布到网站上了。不过还不够完美，我们一直没说带图片的文章要怎么处理，其实 Hexo 本身支持将图片打包发布，需要新建博客时创建对应的图片文件夹，有点麻烦就不介绍了。我们既然已经用了 Markdown 格式，图片在 Markdown 文件里不过就是一个路径或者网址，为什么不用更简便的方法呢？接下来第五篇文章，就介绍怎么搭建自己的免费图床并搭配 Typora 使用。</p>
<p>相信我，用上了 Markdown和 Typora ，你会爱上写博客的。</p>
 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <div class="declare">
      <ul class="post-copyright">
        <li>
          <i class="ri-copyright-line"></i>
          <strong>版权声明： </strong>
          
          本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！
          
        </li>
      </ul>
    </div>
    
    <footer class="article-footer">
       
<div class="share-btn">
      <span class="share-sns share-outer">
        <i class="ri-share-forward-line"></i>
        分享
      </span>
      <div class="share-wrap">
        <i class="arrow"></i>
        <div class="share-icons">
          
          <a class="weibo share-sns" href="javascript:;" data-type="weibo">
            <i class="ri-weibo-fill"></i>
          </a>
          <a class="weixin share-sns wxFab" href="javascript:;" data-type="weixin">
            <i class="ri-wechat-fill"></i>
          </a>
          <a class="qq share-sns" href="javascript:;" data-type="qq">
            <i class="ri-qq-fill"></i>
          </a>
          <a class="douban share-sns" href="javascript:;" data-type="douban">
            <i class="ri-douban-line"></i>
          </a>
          <!-- <a class="qzone share-sns" href="javascript:;" data-type="qzone">
            <i class="icon icon-qzone"></i>
          </a> -->
          
          <a class="facebook share-sns" href="javascript:;" data-type="facebook">
            <i class="ri-facebook-circle-fill"></i>
          </a>
          <a class="twitter share-sns" href="javascript:;" data-type="twitter">
            <i class="ri-twitter-fill"></i>
          </a>
          <a class="google share-sns" href="javascript:;" data-type="google">
            <i class="ri-google-fill"></i>
          </a>
        </div>
      </div>
</div>

<div class="wx-share-modal">
    <a class="modal-close" href="javascript:;"><i class="ri-close-circle-line"></i></a>
    <p>扫一扫，分享到微信</p>
    <div class="wx-qrcode">
      <img src="//api.qrserver.com/v1/create-qr-code/?size=150x150&data=http://example.com/2021/01/11/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%85%8D%E8%B4%B9%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2(%E5%9B%9B)%E2%80%94%E2%80%94%E7%BC%96%E5%86%99Markdown%E6%96%87%E7%AB%A0%E5%88%A9%E5%99%A8%20Typora/" alt="微信分享二维码">
    </div>
</div>

<div id="share-mask"></div>  
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Hexo/" rel="tag">Hexo</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/" rel="tag">博客搭建</a></li></ul>

    </footer>
  </div>

   
  <nav class="article-nav">
    
      <a href="/2021/01/14/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%85%8D%E8%B4%B9%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2(%E4%BA%94)%E2%80%94%E2%80%94Typora%20+%20PicGo%20+%20GitHub%20Gitee%E5%9B%BE%E5%BA%8A/" class="article-nav-link">
        <strong class="article-nav-caption">上一篇</strong>
        <div class="article-nav-title">
          
            从零开始免费搭建自己的博客(五)——Typora + PicGo + GitHub/Gitee图床
          
        </div>
      </a>
    
    
      <a href="/2021/01/02/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%85%8D%E8%B4%B9%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2(%E4%B8%89)%E2%80%94%E2%80%94%E5%9F%BA%E4%BA%8E%20Gitee%20pages%20%E5%BB%BA%E7%AB%99/" class="article-nav-link">
        <strong class="article-nav-caption">下一篇</strong>
        <div class="article-nav-title">从零开始免费搭建自己的博客(三)——基于 Gitee pages 建站</div>
      </a>
    
  </nav>

   
<!-- valine评论 -->
<div id="vcomments-box">
  <div id="vcomments"></div>
</div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js"></script>
<script>
  new Valine({
    el: "#vcomments",
    app_id: "zy6yBRj9KkWO2XxsT94n1DIW-gzGzoHsz",
    app_key: "auroBE2PQXkQ05CLi30SFv92",
    path: window.location.pathname,
    avatar: "monsterid",
    placeholder: "给我的文章加点评论吧~",
    recordIP: true,
  });
  const infoEle = document.querySelector("#vcomments .info");
  if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0) {
    infoEle.childNodes.forEach(function (item) {
      item.parentNode.removeChild(item);
    });
  }
</script>
<style>
  #vcomments-box {
    padding: 5px 30px;
  }

  @media screen and (max-width: 800px) {
    #vcomments-box {
      padding: 5px 0px;
    }
  }

  #vcomments-box #vcomments {
    background-color: #fff;
  }

  .v .vlist .vcard .vh {
    padding-right: 20px;
  }

  .v .vlist .vcard {
    padding-left: 10px;
  }
</style>

 
   
  
</article>

</section>
      <footer class="footer">
  <div class="outer">
    <ul>
      <li>
        Copyrights &copy;
        2020-2021
        <i class="ri-heart-fill heart_icon"></i> 杰克小麻雀
      </li>
    </ul>
    <ul>
      <li>
        
        
        
        由 <a href="https://hexo.io" target="_blank">Hexo</a> 强力驱动
        <span class="division">|</span>
        主题 - <a href="https://github.com/Shen-Yu/hexo-theme-ayer" target="_blank">Ayer</a>
        
      </li>
    </ul>
    <ul>
      <li>
        
        
        <span>
  <span><i class="ri-user-3-fill"></i>访问人数:<span id="busuanzi_value_site_uv"></span></s>
  <span class="division">|</span>
  <span><i class="ri-eye-fill"></i>浏览次数:<span id="busuanzi_value_page_pv"></span></span>
</span>
        
      </li>
    </ul>
    <ul>
      
    </ul>
    <ul>
      
    </ul>
    <ul>
      <li>
        <!-- cnzz统计 -->
        
      </li>
    </ul>
  </div>
</footer>
      <div class="float_btns">
        <div class="totop" id="totop">
  <i class="ri-arrow-up-line"></i>
</div>

<div class="todark" id="todark">
  <i class="ri-moon-line"></i>
</div>

      </div>
    </main>
    <aside class="sidebar on">
      <button class="navbar-toggle"></button>
<nav class="navbar">
  
  <div class="logo">
    <a href="/"><img src="/favicon.ico" alt="半亩方塘"></a>
  </div>
  
  <ul class="nav nav-main">
    
    <li class="nav-item">
      <a class="nav-item-link" href="/">主页</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/archives">归档</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/categories">分类</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags">标签</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/friends">关于我</a>
    </li>
    
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
      <a class="nav-item-link nav-item-search"  title="搜索">
        <i class="ri-search-line"></i>
      </a>
      
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
    </aside>
    <script>
      if (window.matchMedia("(max-width: 768px)").matches) {
        document.querySelector('.content').classList.remove('on');
        document.querySelector('.sidebar').classList.remove('on');
      }
    </script>
    <div id="mask"></div>

<!-- #reward -->
<div id="reward">
  <span class="close"><i class="ri-close-line"></i></span>
  <p class="reward-p"><i class="ri-cup-line"></i>请我喝杯咖啡吧~</p>
  <div class="reward-box">
    
    <div class="reward-item">
      <img class="reward-img" src="https://cdn.jsdelivr.net/gh/Shen-Yu/cdn/img/alipay.jpg">
      <span class="reward-type">支付宝</span>
    </div>
    
    
    <div class="reward-item">
      <img class="reward-img" src="https://cdn.jsdelivr.net/gh/Shen-Yu/cdn/img/wechat.jpg">
      <span class="reward-type">微信</span>
    </div>
    
  </div>
</div>
    
<script src="/js/jquery-2.0.3.min.js"></script>


<script src="/js/lazyload.min.js"></script>

<!-- Tocbot -->


<script src="/js/tocbot.min.js"></script>

<script>
  tocbot.init({
    tocSelector: '.tocbot',
    contentSelector: '.article-entry',
    headingSelector: 'h1, h2, h3, h4, h5, h6',
    hasInnerContainers: true,
    scrollSmooth: true,
    scrollContainer: 'main',
    positionFixedSelector: '.tocbot',
    positionFixedClass: 'is-position-fixed',
    fixedSidebarOffset: 'auto'
  });
</script>

<script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css">
<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js"></script>

<script src="/dist/main.js"></script>

<!-- ImageViewer -->

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.min.css">
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"></script>

<script>
    function viewer_init() {
        let pswpElement = document.querySelectorAll('.pswp')[0];
        let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)'))

        $imgArr.forEach(($em, i) => {
            $em.onclick = () => {
                // slider展开状态
                // todo: 这样不好，后面改成状态
                if (document.querySelector('.left-col.show')) return
                let items = []
                $imgArr.forEach(($em2, i2) => {
                    let img = $em2.getAttribute('data-idx', i2)
                    let src = $em2.getAttribute('data-target') || $em2.getAttribute('src')
                    let title = $em2.getAttribute('alt')
                    // 获得原图尺寸
                    const image = new Image()
                    image.src = src
                    items.push({
                        src: src,
                        w: image.width || $em2.width,
                        h: image.height || $em2.height,
                        title: title
                    })
                })
                var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
                    index: parseInt(i)
                });
                gallery.init()
            }
        })
    }
    viewer_init()
</script>

<!-- MathJax -->

<!-- Katex -->

<!-- busuanzi  -->


<script src="/js/busuanzi-2.3.pure.min.js"></script>


<!-- ClickLove -->

<!-- ClickBoom1 -->

<!-- ClickBoom2 -->


<script src="/js/clickBoom2.js"></script>


<!-- CodeCopy -->


<link rel="stylesheet" href="/css/clipboard.css">

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
  function wait(callback, seconds) {
    var timelag = null;
    timelag = window.setTimeout(callback, seconds);
  }
  !function (e, t, a) {
    var initCopyCode = function(){
      var copyHtml = '';
      copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
      copyHtml += '<i class="ri-file-copy-2-line"></i><span>COPY</span>';
      copyHtml += '</button>';
      $(".highlight .code pre").before(copyHtml);
      $(".article pre code").before(copyHtml);
      var clipboard = new ClipboardJS('.btn-copy', {
        target: function(trigger) {
          return trigger.nextElementSibling;
        }
      });
      clipboard.on('success', function(e) {
        let $btn = $(e.trigger);
        $btn.addClass('copied');
        let $icon = $($btn.find('i'));
        $icon.removeClass('ri-file-copy-2-line');
        $icon.addClass('ri-checkbox-circle-line');
        let $span = $($btn.find('span'));
        $span[0].innerText = 'COPIED';
        
        wait(function () { // 等待两秒钟后恢复
          $icon.removeClass('ri-checkbox-circle-line');
          $icon.addClass('ri-file-copy-2-line');
          $span[0].innerText = 'COPY';
        }, 2000);
      });
      clipboard.on('error', function(e) {
        e.clearSelection();
        let $btn = $(e.trigger);
        $btn.addClass('copy-failed');
        let $icon = $($btn.find('i'));
        $icon.removeClass('ri-file-copy-2-line');
        $icon.addClass('ri-time-line');
        let $span = $($btn.find('span'));
        $span[0].innerText = 'COPY FAILED';
        
        wait(function () { // 等待两秒钟后恢复
          $icon.removeClass('ri-time-line');
          $icon.addClass('ri-file-copy-2-line');
          $span[0].innerText = 'COPY';
        }, 2000);
      });
    }
    initCopyCode();
  }(window, document);
</script>


<!-- CanvasBackground -->


    
  </div>
</body>
<script type="text/javascript">
if(!/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
  document.write('<script type="text/javascript" src="/js/FunnyTitle.js"><\/script>');
  document.write('<script type="text/javascript" src="/js/snow.js"><\/script>');
}
</script>
</html>